<template>
	<view class="body">
		<u-navbar title="流程处理"></u-navbar>
		<view class="tabs-bg">
			<u-tabs :current="current" :is-scroll="false" :list="list" active-color="#1BA6FC" bg-color="#EDEDED"
					inactive-color="#A8A8A8" @change="change"></u-tabs>
		</view>
		<view class="page-body">
			<view v-show="current==0">
				<form-info v-if="taskForm.taskId" :formResult="formResult"></form-info>
			</view>
			<view v-show="current==1" class="time-line">
				<u-time-line>
					<u-time-line-item v-for=" flow in flowRecordList" :key='flow.taskId'>
						<template v-slot:node>
							<u-icon :size="24" color="#ddd" name="pushpin-fill"></u-icon>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">
									{{ flow.taskName }}
								</view>
								<view v-if="flow.candidate" class="u-order-time">
									候选办理：{{ flow.candidate }}
								</view>
								<view v-if="flow.assigneeName" class="u-order-time">
									办理人：{{ flow.assigneeName }}
								</view>
								<view class="u-order-time">
									接收时间：{{ flow.createTime }}
								</view>
								<view v-if="flow.finishTime" class="u-order-time">
									办理时间：{{ flow.finishTime }}
								</view>
								<view v-if="flow.duration" class="u-order-time">
									耗时:{{ flow.duration }}
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			<view v-if="current==2">
				<image :src="diagramImgUrl" mode="aspectFit"></image>
			</view>
		</view>
		<view class="btn-body u-flex">
			<view class="u-flex-3" @click="toDetailView">
				<view class="btn btn-plain">
					<u-icon label="详情" label-color="#3D3D3D" label-size="32.61" name="/static/tduck/2.png" size="32">
					</u-icon>
				</view>
			</view>
			<view class="u-flex-3" @click="()=>{$refs.operate.handleReturn()}">
				<view class="btn btn-plain">
					<u-icon label="退回" label-color="#3D3D3D" label-size="32.61" name="/static/tduck/1.png" size="32">
					</u-icon>
				</view>
			</view>
			<view class="u-flex-3" @click="()=>{$refs.operate.handleReject()}">
				<view class="btn">拒绝</view>
			</view>
			<view class="u-flex-3" @click="()=>{$refs.operate.handleComplete()}">
				<view class="btn btn-primary">同意</view>
			</view>
		</view>
		<operate ref="operate" :task-form='taskForm' @back="handleBackRef"/>
	</view>
</template>

<script>
import formInfo from './formInfo.vue'
import operate from './operate.vue'

export default {
	components: {
		formInfo,
		operate
	},
	data() {
		return {
			taskForm: {
				instanceId: "", // 流程实例编号
				deployId: "", // 流程定义编号
				taskId: "", // 流程任务编号
				procDefId: "", // 流程编号
				formDataId: "" // 数据id
			},
			diagramImgUrl: '',
			wvUrl: '',
			flowRecordList: [],
			list: [{
				name: '表单信息'
			}, {
				name: '流转信息'
			}, {
				name: '流程图',
			}],
			current: 0,
			// 表单数据
			formResult: {}
		}
	},
	onLoad(options) {
		this.taskForm.instanceId = options.instanceId
		this.taskForm.taskId = options.taskId
		this.taskForm.deployId = options.deployId
		this.diagramImgUrl =
			`${this.$u.api.getBaseUrl()}/process/task/diagram/${options.instanceId}?Authorization=Bearer ` + this
				.vuex_token
		// 流转记录
		this.$u.api.workflow.getProcessTaskFlowRecord({
			procInsId: this.taskForm.instanceId,
			deployId: this.taskForm.deployId
		}).then(res => {
			this.flowRecordList = res.flowList
		})
		// 表单数据
		this.$u.api.workflow.getBusinessProcessForm({
			taskId: this.taskForm.taskId,
			instanceId: this.taskForm.instanceId
		}).then(res => {
			this.formResult = res
			this.taskForm.formDataId = res.data.id
		})
	},
	methods: {
		change(index) {
			this.current = index;
		},
		toDetailView() {
			let params = JSON.stringify({
				taskId: this.taskForm.taskId,
				instanceId: this.taskForm.instanceId,
				token: this.vuex_token
			})
			this.wvUrl = this.$u.api.getWebBaseUrl() + `/project/workflow/form/ReviewForm`
			console.log(this.wvUrl);
			uni.navigateTo({
				url: `/pages/common/webview?url=${this.wvUrl}&params=${params}`
			})
		},
		/**
		 * 返回刷新
		 */
		handleBackRef() {
			uni.$emit('refreshData', 0)
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.body {
	background: #EDEDED;
}

.tabs-bg {
	height: 96.01rpx;
}

.page-body {
	height: 100%;
	border-radius: 14.49rpx 14.49rpx 0 0;
	background-color: white;
}

.btn-body {
	position: fixed;
	bottom: 10rpx;
	left: 0;
	right: 0;
	padding: 0 27.17rpx;
	background-color: white;
	z-index: 9999;
}

.btn {
	width: 152.17rpx;
	height: 65.22rpx;
	line-height: 65.22rpx;
	text-align: center;
	font-size: 32.61rpx;
	border: 1.81rpx solid #B9B9B9;
	border-radius: 9.06rpx;
	color: #000000;
	margin: 0 auto;
}

.btn-primary {
	color: white;
	background-color: #0256FF;
	border-color: #0256FF;
}

.btn-plain {
	border-color: white;
	padding-top: 4rpx;
}

.time-line {
	padding: 40rpx;
}

.u-node {
	width: 44rpx;
	height: 44rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-title {
	color: #333333;
	font-weight: bold;
	font-size: 28rpx;
}


.u-order-time {
	color: #303133;
	font-size: 26rpx;
}
</style>